<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>NG-Spring Todo Application</title>

    <link rel="stylesheet" href="vendor/angular/angular-csp.css"/>
    <link rel="stylesheet" href="vendor/angular-material/angular-material.css"/>
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="assets/app.css"/>
</head>
<body ng-app="todo" ng-cloak layout="row" ng-controller="TodoController as vm">
<md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
            md-component-id="left"
            md-is-locked-open="$mdMedia('gt-sm')">

    <md-toolbar class="md-whiteframe-z1">
        <h1>List</h1>
    </md-toolbar>

    <md-list>
        <md-list-item ng-repeat="it in vm.todoList">
            <md-button ng-click="vm.selectList(it)" ng-class="{'selected' : it === vm.selected }">
                {{it.name}}
            </md-button>
        </md-list-item>
    </md-list>

</md-sidenav>


<div flex layout="column" tabIndex="-1" role="main" class="md-whiteframe-z2">

    <md-toolbar layout="row" class="md-whiteframe-z1">
        <md-button class="menu" hide-gt-sm ng-click="vm.toggleLeft()" aria-label="Show Todo List">
            <md-icon  class="fa fa-bars fa-2x" ></md-icon>
        </md-button>
        <h1>NG-Spring Todo</h1>
    </md-toolbar>

    <md-content flex id="content">


    </md-content>

</div>

</body>
<script type="text/javascript" src="vendor/angular/angular.min.js"></script>
<script type="text/javascript" src="vendor/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="vendor/angular-aria/angular-aria.min.js"></script>
<script type="text/javascript" src="vendor/angular-material/angular-material.min.js"></script>
<script type="text/javascript" src="app/todo.js"></script>
</html>